<template>
  <div class="app-container haplotype-detail default-scrollbar">
    {{colList}}
    <div>
      <!-- <el-form
        ref="historyForm"
        :model="historyForm"
        size="small"
      > -->
      <div
        class="table-box"
        @contextmenu.prevent.capture
      >
        <div style="text-align:right;margin:5px">
          <el-button
            plain
            type="primary"
            size="mini"
            @click="addParamsSetting"
          >新增行</el-button>
          <el-button
            plain
            type="primary"
            size="mini"
            @click="addColSetting"
          >新增列</el-button>
        </div>
        <el-table
          :data="historyForm.tableData"
          :loading="loading"
          style="width: 100%"
          class="list-table default-scrollbar"
          size="mini"
          @header-contextmenu="rightClickColShowFun"
          @row-contextmenu="rightClickRowShowFun"
          :cell-class-name="tableClassName"
          border
          empty-text="暂无数据"
        >
          <el-table-column
            label="序号"
            align="center"
            width="50"
          >
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column
            label="固定列"
            align="center"
            prop="name"
            class-name="cellDefault"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                class="name-input"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column :label="'ABO-'+`${colList.length}`+'位点'" class-name="specital-title"> -->
          <!-- 动态列 -->
          <el-table-column
            align="center"
            class-name="cellDefault"
            v-for="(item,index) in colList"
            :key="index"
            min-width="40"
          >
            <template #header>
              <el-input
                v-model="colList[index]"
                size="mini"
                @change="setColName(index,colList[index])"
              />
            </template>
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model.number="scope.row[item].value"
                @input="setInputVal"
                :class="scope.row[item].checked ? 'red' : ''"
              ></el-input>
            </template>
          </el-table-column>
          <!-- </el-table-column> -->
        </el-table>
      </div>

      <!-- <div class="start-btn-box">
          <el-button type="primary" @click="startComparisonFun" class="start-btn">开始对比</el-button>
        </div> -->
      <!-- </el-form> -->
    </div>

    <el-dialog
      title="温馨提示"
      :visible.sync="dialogRowVisible"
      width="250px"
    >
      <span>确定删除此行数据嘛？</span>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogRowVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitFunRow"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogColVisible"
      width="250px"
    >
      <span>确定删除此列数据嘛？</span>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogColVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitFunCol"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "haplotypeDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 表单参数-表格内容数据
      historyForm: {
        tableData: []
      },
      // 表头列表数组
      colList: [],
      isAddCol: true,
      colNum: 0,
      rowNum: 0,
      mouldName: "A101templete",
      dialogRowVisible: false, // 新增行
      dialogColVisible: false, // 新增列
      currentClickRow: null,
      currentClickCol: null,
      resultList: []
    };
  },
  methods: {
    // 根据默认几行几列初始化表格
    init() {
      console.log("init");
      //   for (let i = 0; i < this.colNum; i++) {
      //     this.colList.push("");
      //   }
      //   for (let j = 0; j < this.rowNum; j++) {
      //     if (j === 0) {
      //       this.historyForm.tableData.push({
      //         name: this.mouldName,
      //         "": {
      //           value: null,
      //           checked: 0
      //         }
      //       });
      //     } else {
      //       this.historyForm.tableData.push({
      //         name: null,
      //         "": {
      //           value: null,
      //           checked: 0
      //         }
      //       });
      //     }
      //   }
    },
    // 在数组最后添加一行
    addParamsSetting() {
      this.addList();
    },
    // 新增行
    addList() {
      let item = {
        name: null
      };
      for (let i in this.colList) {
        item[this.colList[i]] = {
          value: null,
          checked: 0
        };
      }
      this.historyForm.tableData.push(item);
    },
    // 删除当前行
    deleteRow(index) {
      this.historyForm.tableData.splice(index, 1);
    },
    // 在数据最后新增一列
    addColSetting() {
      for (let i in this.colList) {
        if (this.colList[i] === "") {
          this.isAddCol = false;
        } else {
          this.isAddCol = true;
        }
      }
      if (this.isAddCol) {
        this.addColList();
      } else {
        this.$message.success("还有未填写的列");
      }
    },
    // 新增列
    addColList() {
      let list = this.historyForm.tableData;
      for (let i = 0; i < list.length; i++) {
        list[i][""] = {
          value: null,
          checked: 0
        };
      }
      this.colList.push("");
    },
    // 修改表头名fun
    setColName(index, val) {
      let list = this.historyForm.tableData;
      for (let i = 0; i < list.length; i++) {
        this.$set(list[i], val, {
          value: null,
          checked: 0
        });
      }
      this.$forceUpdate();
    },
    // 输入内容数据的fun
    setInputVal() {
      for (let i in this.colList) {
        if (this.colList[i] === "") {
          this.isAddCol = false;
        } else {
          this.isAddCol = true;
        }
      }
      if (!this.isAddCol) {
        this.$message.success("请先填写完成所有表头内容，且确保无误！");
        let list = this.historyForm.tableData;
        for (let j = 0; j < list.length; j++) {
          if (list[j][""]) {
            list[j][""] = {
              value: null,
              checked: 0
            };
          }
        }
      }
    },
    // 右键单击选中行-确认是否删除行
    rightClickRowShowFun(row, column, event) {
      this.currentClickRow = row.index;
      this.dialogRowVisible = true;
    },
    // 右键单击选中行-确认是否删除列
    rightClickColShowFun(column, event) {
      this.currentClickCol = column.index;
      this.dialogColVisible = true;
    },
    // 确认删除行
    submitFunRow() {
      this.dialogRowVisible = false;
      this.deleteRow(this.currentClickRow);
    },
    // 给数据的row、column赋index，便于进行删除行、删除列
    tableClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex - 2;
      if (rowIndex === 0) {
        return "blue";
      }
    },
    // 确认删除列
    submitFunCol() {
      this.dialogColVisible = false;
      this.deleteCol(this.currentClickCol);
    },
    // 删除当前列
    deleteCol(index) {
      this.colList.splice(index, 1);
    }
  }
};
</script>
<style lang="scss">
.haplotype-detail {
  .list-table {
    background: #eef8ff;
    &.el-table thead.is-group th.el-table__cell {
      background: #eef8ff;
    }
    &.el-table td.el-table__cell {
      background: #eef8ff;
      color: #0083d7;
    }
    .name-input {
      input {
        color: #0083d7;
      }
    }
    .specital-title {
      color: #0083d7;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #a0d8ff;
    .cell input {
      background: #a0d8ff;
    }
  }
  .cellDefault {
    padding: 0 !important;
    .cell {
      padding: 0 !important;
      input {
        border: none;
        border-radius: 0;
        text-align: center;
        background: #eef8ff;
        padding: 0;
      }
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
      }
    }
  }
  th.cellDefault {
    input {
      background: #f5f7fa;
    }
  }
  .red {
    background: #e8cccb;
    input {
      background: #e8cccb !important;
      color: #dd262f;
    }
  }
  .blue {
    background: #a0d8ff !important;
    input {
      background: #a0d8ff !important;
    }
  }
}
